﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        * {
        margin:0;
        padding:0;
        list-style:none;
        }
        a {
            font-size:14px;
            text-decoration: none;
            color:#fff;
        }
            .web_box {
            width: 980px;
            margin: 0px auto;
            height: 101px;
            position: relative;
        }
        .f1 {
            float: left;
            overflow: hidden;
            
        }
        .top_L {
            padding-top: 20px;
        }
        .top_nav {
            margin-left: 23px;
        }
        .nav {
            padding: 0 0px;
            height: 101px;
            line-height: 101px;
            position: absolute;
            z-index: 111;
        }
            .nav .nLi {
                float: left;
                position: relative;
                display: inline;
            }
                .nav .nLi h3 a {
                    display: block;
                    padding: 0 15px;
                    font-size: 15px;
                    color: #777777;
                    margin-right: 8px;
                    transition: all .3s ease 0s;
                    font-weight:normal;
                }
                .nav .nLi:nth-child(1) h3 a {
                    background: #174fa4;
                    color:#fff;
                    
                }

                    .nav .sub {
                        height: 0px;
                        overflow: hidden;
                        width: 160px;
                        left: 0;
                        z-index: 999;
                        top: 101px;
                        position: absolute;
                        background: #174fa4;
                        line-height: 30px;
                        transition: all .5s ease 0s;
                    }
                .nav .sub a {
                    display: block;
                    padding-left: 35px;
                    transition: all .3s ease 0s;
                    background: url(http://www.zzkjg.com/images/nav_xx3.png) 20px center no-repeat;
                }

            .nav .sub a:hover {
                padding-left: 40px;
               
            }
                .nav .sub li:hover{
                    background:rgba(255,255,255,0.1)
                }
                .nav .sub li:nth-child(1) {
                    margin-top: 20px;
                   
                }
    </style>
</head>
<body>
    <div class="web_box">
        <div class="f1 top_L">
            <a href=""><img src="http://www.zzkjg.com/images/logo.jpg" alt="Alternate Text" /></a>
        </div>
        <div class="f1 top_nav">
            <ul class="nav">
               
            </ul>
        </div>
    </div>
    <script>
        var data = [
            {
                title: '首页',
                list: []
            },
            {
                title: '概况',
                list: ['科技馆介绍', '馆内资讯', '通知公告', '预算公开']
            },
            {
                title: '楼层展览',
                list: ['展馆一层', '展馆二层', '展馆三层', '临时展览']
            },
            {
                title: '科普活动',
                list: ['科普大篷车', '科普报告会', '馆校结合', '魅力科学课堂', '科普表演剧', '理论广角', '创客训练营', '数学实验室']
            },
            {
                title: '影院影讯',
                list: ['影院介绍', '列播放场', '影片介绍']
            },
            {
                title: '科普志愿者',
                list: ['志愿者管理办法', '志愿者风采', '网上申请']
            },
            {
                title: '咨询服务',
                list: ['开馆时间', '失物招领', '乘车路线', '参观须知', '联系我们']
            },
            {
                title: '报名入口',
                list: ['资源下载', '科学运动会报名', '科普大篷车报名']
            },
        ]
        var str = ``;
        for (var i of data) {
            str +=`<li class="nLi">
                    <h3>
                        <a href="#">${i.title}</a>
                    </h3>
                    <ul class="sub">`
            var str1 = ``
            for (var j in i.list) {
                str1 +=`<li><a href="#">${i.list[j]}</a></li>`
            }
            str += str1 + ` </ul> </li>`;
        }
        let ul = document.querySelector(`.nav`)
        ul.innerHTML = str;
    </script>
    <script>;
        let as = document.querySelectorAll(`.nLi h3>a`);
        let uls = document.querySelectorAll(`.sub`);
       
        for (let i = 0; i < as.length; i++) {
            
            as[i].onmouseover = function () {
                for (var j = 0; j < uls.length; j++) {
                    uls[j].style.height = `0px`;
                    as[j].style.background = `#fff`;
                    as[j].style.color = `#777777`;
                } 
                as[i].style.background = `#174fa4`;
                as[i].style.color = `#fff`;
                uls[0].style.display =`none`
                uls[i].style.height = `${uls[i].children.length * 30+40}px`;
            }
            as[i].onmouseout = function () {
                for (var j = 0; j < uls.length; j++) {
                    uls[j].style.height = `0px`;
                   
                }
            }
            uls[i].onmouseover = function () {
                /*let as1 = document.querySelectorAll(`.sub li>a`);*/
                
                for (var j = 0; j < as.length; j++) {
                    as[j].style.background = `#fff`;
                    as[j].style.color = `#777777`;
                }
                uls[i].style.height = `${uls[i].children.length * 30 + 40}px`;
                as[i].style.background = `#174fa4`;
                as[i].style.color = `#fff`;
                //for (var k = 0; k < as1.ength; k++) {
                //    asl[k].style.padding=`0 0 0 55px`;
                //}

            }
            uls[i].onmouseout = function () {
                uls[i].style.height = `0`;
                
            }
        }
    </script>
</body>
</html> 